<template>
	<div class="outer">
		<h2>App组件</h2>
		<img src="https://www.atguigu.com/images/index_new/logo.png" alt="">
		<br>
		<Modal />
	</div>
</template>

<script setup lang="ts" name="App">
import { ref, customRef } from "vue"
import Modal from "./Modal.vue";
</script>


<style scoped>
.outer {
	background-color: #ddd;
	border-radius: 10px;
	padding: 5px;
	box-shadow: 0 0 10px;
	width: 400px;
	height: 400px;
	/* 滤镜,饱和度 */
	/* 当添加滤镜后,弹窗相对视口定位会失效,改为根据父容器定位,此时就需要Teleport */
	filter: saturate(100%);
}

img {
	width: 180px;
}

button {
	margin: 0 5px;
}
</style>